<template>
<div class="home-page">
  <div class="home-view">
     <div class="item">
       <div class="function">
         <div class="list" v-for="(item,index) in getMeunList" :key="index" @click="btnUrl(item)">
           <div class="img-view">
             <img :src="item.url" />
           </div>
           <div class="name">{{item.text}}</div>
         </div>
       </div>
     </div>
  </div>
</div>
</template>

<script>
import {getMeun} from '@/api/teachManage'

export default {
    data() {
      return {
        leftList:[
          {
            text:'授课端',
            url:require('@/assets/home/000041.png'),
            path:'/teachManage/index',
            sysName: "教师授课系统",
            type:1,
          }, 
          {
            text:'奇妙商城',
            url:require('@/assets/home/000038.png'),
            path:'/videoManage/videofirst',
            sysName: "奇妙商城",
            type:0
          },
          {
            text:'积分商城',
            url:require('@/assets/home/002.png'),
            path:'/brainManage/monitor',
             sysName: "积分商城",
            type:0
          },
          {
            text:'用户中心',
            url:require('@/assets/home/007.png'),
            path:'/dataManage/account',
             sysName: "用户中心",
            type:6
          },
          {
            text:'互动系统',
            url:require('@/assets/home/000036.png'),
            path:'/satelliteManage/monitor',
             sysName: "互动系统",
             type:0
          },
          {
            text:'活动系统',
            url:require('@/assets/home/006.png'),
            path:'/clientManage/courseware',
             sysName: "互动系统",
             type:0
          }
        ],
        sysTemList:[]
      }
    },
    computed:{
      getMeunList(){
       let m = this.leftList.map((item)=>{
         let mlist =  this.sysTemList.some((list)=>{
            return list.sysName ===item.sysName && list.isEnable===true
          })
          item.show = mlist
          return item
        })
        // .filter((item)=>{
        //   return item.show
        // })
        return m
      }
    },
    methods:{
      btnUrl(item){
        if(item.type===0){
          this.$message({
          showClose: true,
          message: '模块开发中',
          type: 'warning'
        });
          return
        }
           this.$store.dispatch('user/delAllViews')
          localStorage.setItem('menuKey',item.type)
          this.$router.push({ path: item.path })
      }
    },
    created(){
      getMeun({}).then((res)=>{
        if(res.code===0){
         this.sysTemList = res.data ||[]
        }
      })
    }
}
</script>

<style lang="scss">
.home-page{
  min-height:100vh;
  background-color: #fff;
}
.convenient-page{
      padding:20px 20px 0 20px;
     .convenient-view{
        background-color: #fff;
        padding:20px;
        .title{
          font-size:16px;
          color:#1890ff;
          padding-bottom:20px;
        }
        .describe{
          font-size:14px;
          color:#666;
        }
        .add-view{
          display: flex;
          justify-content: flex-start;
          margin-top:20px;
          flex-flow: wrap;
          .btn-add{
            height:60px;
            width:60px;
            text-align: center;
            font-size:16px;
            line-height:60px;
            border:2px dashed #ddd;
            margin-bottom:20px;
            cursor: pointer;
            margin-right:10px;
            font-size:26px;
            color:#999;
          }
        }
     }
}
.home-view{
  display: flex;
  justify-content: flex-start;
  padding:20px;
  .item{
    width:100%;
    margin-right:10px;
    background-color: #fff;
    padding:20px;
    .title{
      font-size:16px;
      color:#1890ff;
      padding-bottom:20px;
    }
    .describe{
      font-size:14px;
      color:#666;
    }
    .function{
      display: flex;
      justify-content: center;
      padding-top:0;
      flex-flow: wrap;
      width: 520px;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      margin-left: -250px;
      top: 50%;
      margin-top: -200px;
      .list{
          width: 150px;
          margin-bottom: 20px;
          margin-right:20px;
          padding: 20px 0;
          cursor: pointer;
          border: 1px solid #eee;
          border-radius: 4px;
        .img-view{
          text-align: center;
          img{
            width:60px;
          }
        }
        cursor: pointer;
        .icon{
          text-align: center;
          font-size:60px;
          width:100%;
          color:#999;
        }
        .name{
          text-align: center;
          width:100%;
          font-size:14px;
          color:#334;
          padding-top:10px;
        }
      }
      .list:hover{
        background-color: #f7f7f7;
        transform:scale(1.2);
      }
    }
  }
}
</style>